import React, { useState } from 'react';
import { Input, Select, Button, Form, Radio, Upload, Cascader } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
const { Option } = Select;

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
export default function goodFrom(props) {
  const [form] = Form.useForm();
  const onFinish = (values) => {
    values.goodsTypeId = values.goodsTypeId[values.goodsTypeId.length - 1];
    values.photo = values.upload[0].name;
    props.add(values);
  };

  const onReset = () => {
    form.resetFields();
  };
  function onChange(value) {}
  const normFile = (e) => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item name="name" label="商品名称" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item
        name="goodsTypeId"
        label="商品类型"
        rules={[{ required: true }]}
      >
        <Cascader
          fieldNames={{ label: 'title', value: 'id', children: 'children' }}
          options={props.typeData}
          onChange={onChange}
          placeholder="请选择商品分类"
        />
      </Form.Item>
      <Form.Item name="gname" label="描述" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="price" label="价格" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="counts" label="数量" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="status" label="状态">
        <Radio.Group>
          <Radio value={1}>上架</Radio>
          <Radio value={2}>下架</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        name="upload"
        label="Upload"
        valuePropName="fileList"
        getValueFromEvent={normFile}
      >
        <Upload name="photo" action="/images/uploadImages" listType="picture">
          <Button icon={<UploadOutlined />}>图片</Button>
        </Upload>
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
      </Form.Item>
    </Form>
  );
}
